import { Space, Table, Button, Modal, Tree } from 'antd'
import type { DataNode, TreeProps } from 'antd/es/tree';
import { DeleteOutlined, ExclamationCircleOutlined, OrderedListOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import React, { useEffect, useState } from 'react'
import axios from '../../../utils/request'

const { confirm } = Modal

interface IRole {
  id: number
  roleName: string
  roleType: number
  rights: string[]
}

// interface IRight {
//   key: string
//   title: string
//   label: string
//   id: number
//   grade: number
//   children?: IRight[]
//   pagepermisson?: number
//   rightId?: number
// }

const App: React.FC = () => {
  const [roleList, setroleList] = useState<IRole[]>([])
  const [rightList, setrightList] = useState<DataNode[]>([])
  const [currentRights, setcurrentRights] = useState<string[]>([])
  const [currentId, setcurrentId] = useState<number>(0)
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
    axios.patch(`/roles/${currentId}`,{
      rights: currentRights
    }).then(() => getRoles())
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
    setcurrentRights((checkedKeys as any).checked)
  }

  function getRightList() {
    axios.get('/rights?_embed=children').then(({ data }) => setrightList(data))
  }
  function getRoles() {
    axios.get('/roles').then(({ data }) => setroleList(data))
  }
  useEffect(() => {
    getRightList()
    getRoles()
  }, [])
  const showDeleteConfirm = (item: IRole) => {
    confirm({
      title: 'Are you sure delete this task?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        return axios.delete(`/roles/${item.id}`).then(() => getRoles())
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }
  const columns: ColumnsType<IRole> = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: 'Action',
      render: (item: IRole) => (
        <Space size="middle">
          <Button type="primary" danger ghost shape="circle" icon={<DeleteOutlined />} onClick={() => showDeleteConfirm(item)} />
          <Button type="primary" shape="circle" icon={<OrderedListOutlined />} onClick={() => {
            showModal()
            setcurrentRights(item.rights)
            setcurrentId(item.id)
          }} />
        </Space>
      ),
    },
  ]
  return (
    <div>
      <Table columns={columns} dataSource={roleList} rowKey={(item) => item.id} />
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Tree
          checkable
          checkedKeys = {currentRights}
          onCheck={onCheck}
          checkStrictly = {true}
          treeData={rightList}
    />
      </Modal>
    </div>
  )
}

export default App
